<template>
  <div class="owners-audit-info">
    <div class="basic-info-container">
      <div style="padding: 0 0 16px 0">
        <el-page-header @back="goBack" :content="headerTitle"></el-page-header>
      </div>

      <div class="info-section-warps">
        <!-- 实名认证信息 -->
        <div class="info-section">
          <div class="section-header">
            <h4>实名认证</h4>
          </div>
          <div class="section-content">
            <div class="info-item">
              <div style="margin-right: 20px">
                <div class="id-about">
                  <img src="../../assets/id/id-z.png" />
                  <span>身份证人像</span>
                </div>
                <div class="id-about">
                  <img src="../../assets/id/id-f.png" />
                  <span>身份证国微</span>
                </div>
              </div>
              <div class="item-content">
                <p>姓名：王鑫</p>
                <p>身份证号：510722186912065962</p>
                <p>证件有效期：2033年10月23日</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 驾驶证信息 -->
        <div class="info-section">
          <div class="section-header">
            <h4>驾驶证</h4>
          </div>
          <div class="section-content">
            <div class="info-item">
              <div style="margin-right: 20px">
                <div class="id-about">
                  <img src="../../assets/id/id-z.png" />
                  <span>驾驶证</span>
                </div>
              </div>

              <div class="item-content">
                <p>证件有效期：2033年10月23日</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 行驶证信息 -->
      <div class="info-section-warps">
        <!-- 行驶证1信息 -->
        <div class="info-section">
          <div class="section-header">
            <h4>行驶证1</h4>
          </div>
          <div class="section-content">
            <div class="info-item">
              <div style="margin-right: 20px">
                <div class="id-about">
                  <img src="../../assets/id/id-z.png" />
                  <span>行驶证</span>
                </div>
              </div>
              <div class="item-content">
                <p>车牌号：JIA259157</p>
                <p>品牌型号：大众555157</p>
                <p>车座数：7座</p>
                <p>证件有效期：2033年10月23日</p>
              </div>
            </div>
            <div class="info-item">
              <div style="margin-right: 20px">
                <div class="id-about">
                  <img src="../../assets/id/id-z.png" />
                  <span>营运证</span>
                </div>
              </div>
              <div class="item-content">
                <p>行驶证有效期：2033年10月23日</p>
                <p>营运证有效期：2033年10月23日</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 行驶证2信息 -->
        <div class="info-section">
          <div class="section-header">
            <h4>行驶证2</h4>
          </div>
          <div class="section-content">
            <div class="info-item">
              <div style="margin-right: 20px">
                <div class="id-about">
                  <img src="../../assets/id/id-z.png" />
                  <span>行驶证</span>
                </div>
              </div>
              <div class="item-content">
                <p>车牌号：JIA259157</p>
                <p>品牌型号：大众555157</p>
                <p>车座数：7座</p>
                <p>证件有效期：2033年10月23日</p>
              </div>
            </div>
            <div class="info-item">
              <div style="margin-right: 20px">
                <div class="id-about">
                  <img src="../../assets/id/id-z.png" />
                  <span>营运证</span>
                </div>
              </div>
              <div class="item-content">
                <p>行驶证有效期：2033年10月23日</p>
                <p>营运证有效期：2033年10月23日</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 行驶证3信息 -->
        <div class="info-section">
          <div class="section-header">
            <h4>行驶证3</h4>
          </div>
          <div class="section-content">
            <div class="info-item">
              <div style="margin-right: 20px">
                <div class="id-about">
                  <img src="../../assets/id/id-z.png" />
                  <span>行驶证</span>
                </div>
              </div>
              <div class="item-content">
                <p>车牌号：JIA259157</p>
                <p>品牌型号：大众555157</p>
                <p>车座数：7座</p>
                <p>证件有效期：2033年10月23日</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 审核 -->
      <div class="aside-info-section">
        <div class="section-header">
          <h4>审核</h4>
        </div>
        <div class="section-content">
          <p>审核类型：车主认证</p>
          <p>申请时间：2025-10-10 12:13:13</p>
          <p>申请人：陈陈 181 8888 8888</p>
        </div>
        <div class="section-content">
          <p style="flex: 0.3">车主类型：非营运车主</p>
          <div style="flex: 0.7; display: flex; align-items: anchor-center">
            <div>
              审核意见：<el-radio-group
                v-model="auditForm.account_inspection_status"
              >
                <el-radio :label="'success'">通过</el-radio>
                <el-radio :label="'fail'">驳回</el-radio>
              </el-radio-group>
            </div>

            <div style="width: 500px; margin-left: 20px">
              <el-input
                v-model="auditForm.account_inspection_msg"
                placeholder="请输入驳回原因"
              ></el-input>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headerTitle: "车主认证审核(非营运车主)",
      auditForm: {
        account_inspection_status: "",
        account_inspection_msg: "",
      },
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1); //  go()后退+刷新 back()后退
    },
  },
};
</script>

<style lang="scss" scoped>
.owners-audit-info {
  padding: 20px;
  background-color: #f5f7fa;
}
.basic-info-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .info-section-warps {
    display: flex;
    justify-content: space-between;

    border-bottom: 1px solid #ebeef5;
    margin-bottom: 25px;
    .info-section {
      padding-bottom: 15px;
      .section-header {
        h4 {
          margin: 0 0 15px 0;
          font-size: 15px;
          color: #303133;
        }
      }
      .section-content {
        .id-about {
          width: 200px;
          height: 128px;
          position: relative;
          &:first-child {
            margin-bottom: 12px;
          }
          img {
            width: 100%;
            height: 100%;
          }
          span {
            border-width: 0px;
            position: absolute;
            right: 0;
            top: 0;
            width: 76px;
            height: 22px;
            line-height: 22px;
            display: inline-block;
            font-size: 12px;
            text-align: center;
            color: rgb(255, 255, 255);
            background-color: #909399;
          }
        }
        .info-item {
          display: flex;
          margin-bottom: 15px;

          .item-label {
            width: 80px;
            color: #909399;
            font-size: 14px;
          }
          .item-content {
            flex: 1;
            p {
              margin: 0 0 20px 0;
              color: #606266;
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  .aside-info-section {
    .section-header {
      width: 180px;
      h4 {
        font-size: 15px;
        color: #303133;
      }
    }
    .section-content {
      display: flex;
      justify-content: space-between;
      // p {
      //   color: #606266;
      //   font-size: 14px;
      // }
    }
  }
}
</style>
